<template>
  <div class="book-card-wrapper" @click="onDetailClick(item)">
    <div class="book-card-img">
      <image-view :src="item.img"></image-view>
    </div>
    <div class="book-card-desc">{{ item.id }}</div>
    <div class="book-card-tip"></div>
  </div>
</template>

<script>
export default {
  props: ['item'],
  methods: {
    onDetailClick(item) {
      this.$router.push(`/detail/${item.id}`)
    },
  },
}
</script>

<style lang="scss" scoped>
.book-card-wrapper {
  margin: 0.4rem auto;
  width: 7rem; // 1rem = 100px => 750px
  max-width: 750px;
  height: 9.2rem; // 460px 1rem = 100px 460x2 = 9.20px
  border-radius: 0.2rem;
  border: 0.5px solid #ccc;
  box-shadow: #ccc 0 0 20px;
  .book-card-img {
    display: flex;
    justify-content: center;
    align-content: center;
    margin-top: 25px;
  }
}
</style>
